<template>
  <div>
    <div class="toggle_cont">
      <el-tooltip class="item" :content="contentCont" placement="top-start">
        <el-image :src="logoUrl" :class="{'active':isShow}" class="logoUrl" @click="changeShow" />
      </el-tooltip>

    </div>
    <div class="help_right" :class="[{'helpactive':isShow},{'help':!isShow}]">
      <ul>
        <li>
          <div id="btnClickMe" style="height:28px;cursor: pointer;">
            <div class="imgbox"><el-image :src="iconimgqq" class="help_icon" /></div>
            <a class="ceshi help_list"  style="color:#fff " href="tencent://message/?uin=1515308&Site=Senlon.Net&Menu=yes">点我咨询</a>
          </div>
        </li>
        <li>
          <div class="wxid">
            <div class="imgbox"><el-image :src="iconimg" class="help_icon" /></div>
            <p class="help_list">微信必加</p>
          </div>
          <el-image :src="qrcode" class="qrcode" />
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import Cookies from 'js-cookie'
export default {
  name: 'Help',
  data() {
    return {
      logoUrl: require('../../../assets/login_images/wechat.png'),
      qrcode: require('../../../assets/login_images/wechat.png'),
      iconimg: require('../../../assets/login_images/wx.png'),
      iconimgphone: require('../../../assets/login_images/phone.png'),
      iconimgqq: require('../../../assets/qq/QQ.png'),
      isShow: false,
      contentCont: '点我展开喔',
      code: Cookies.get('invite_code')
    }
  },
  created() {
    const arr = [{ 'url': 'http://wpa.qq.com/msgrd?v=3&uin=1515308&site=qq&menu=yes', 'id': 'qd2355171167484170273b8041c23e4c81d661b2ba96' }
      ]
    arr.map((item) => {
      const script = document.createElement('script')
      script.type = 'text/javascript'
      script.src = item.url
      script.id = item.id
      document.getElementsByTagName('body')[0].appendChild(script)
    })
  },
  methods: {
    openQQ:function(){

    },
    changeShow() {
      this.isShow = !this.isShow
      this.contentCont = this.isShow ? '点我收起喔' : '点我展开喔'
      document.body.style.overflow = ''
    }
  }
}
</script>
<style scoped>
.logoUrl{
    transform: scale(0.8) translateX(0px);
    transform-origin:100% 100%  0;
    transition: all ease 0.3s;
}
.active {
    transform: scale(1.2) translateX(-20px);
    transform-origin:100% 100%  0;
    transition: all ease 0.3s;
}

    .help{
        width:40px;
        height:auto;
        position:fixed;
        right:5px;
        top:300px;
        z-index:9999;
        border-radius: 6px 0 0 6px;
        transform-origin: 90% 0 0;
        transition: all ease 0.15s;
    }
    .help li .help_list,.help li .qrcode{
        display:none;
    }
    .help .phone{
        display:none;
    }
    .helpactive{
        width:160px; /* 105 */
        height:200px;
        top:295px;
        transform-origin: 100% 0 0 ;
        transition: all ease 0.3s;
        position: fixed;
        right: 5px;
        top: 295px;
        z-index: 9999;
    }

    .helpactive .phone{
        display:block;
    }
    .help_right{
        right:0px;
    }
    .toggle_cont{
        width:50px;
        height: 50px;
        position: fixed;
        top: 252px;
        right:0px;
        z-index:9999;
    }
    .help ul{
        background: #2f4159;
        margin:0;
        height:85px; /* 40 */
        padding: 10px 0px 10px 10px;
        border-radius: 6px 0 0 6px;
    }
    .helpactive ul{
        height: auto ; /* 40px */
        background: #2f4159;
        padding: 10px;
        margin-top:0;
    }
    .helpactive ul li{
        list-style:none;
    }
    .help ul li{
        font-size:14px;
        color: #fff;
        list-style: none;
        background:##2f4159;
    }
    .help ul li>div{
        width: 100%;
    }
    .help_icon{
        width: 20px;
        height: 20px;
        float: left;
    }
    .help #btnClickMe:hover{
        position: relative;
    }
    .help .imgbox {
        width: 40px;
        height: 42px;
        padding: 10px;
        position: absolute;
        right: 0;
        top:0px;
    }
    .help .wxid .imgbox{
        right: 0;
        top:40px;
    }
    .help .wxid:hover + .qrcode{
        display:block;
    }
    .helpactive .imgbox{
        background: #2f4159;
        width: 40px;
        height: 42px;
        padding: 10px;
        position: inherit !important;
        right: 0;
        display: initial;
    }
    .help #btnClickMe:hover .imgbox{
        top:-10px
    }
    .help #btnClickMe:hover .help_list{
        display:block;
        position: absolute;
        right: 35px;
        width: 84px;
        padding-right: 10px;
        background: #2f4159;
        text-align: right;
        height: 40px;
        top: -24px;
        line-height: 40px;
    }
   .helpactive .help_list{
        float: left;
    margin: 0px;
    padding-left: 6px;
    line-height: 21px;
    display: block !important;
    color: #fff;
    }
    .helpactive .qrcode{
        margin-top: 10px;
        width: 140px !important;
        height: 140px;
        margin:6px 0px 0px 4px;
        display:block !important;
    }
    .help .qrcode{
        position: absolute;
        top: 50px;
        left: -130px;
        width: 120px;
        border-radius: 5px;
    }
</style>
